<template>
  <div class="first-div">
    <!-- 添加按钮 -->
    <el-button type="primary" class="add-button" size="mini" @click="openAddDrawer">添加</el-button>
    <!-- 列表 -->
    <el-table :data="typeList" border style="width: 100%; header-align:center">
      <el-table-column type="index" label="编号" width="50" />
      <el-table-column prop="typeName" label="类型名"></el-table-column>
      <el-table-column prop="typeBlogCount" label="博客数"></el-table-column>
      <el-table-column prop="enable" label="状态">
        <template slot-scope="scope">
          <el-tag
            type="success"
            v-if="scope.row.enable === 1"
            @click="enable(scope.row.typeId,scope.row.enable)"
          >启用</el-tag>
          <el-tag type="info" v-else @click="enable(scope.row.typeId,scope.row.enable)">未启用</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.typeId)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.typeId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加抽屉 -->
    <el-drawer title="添加" :visible.sync="drawer">
      <!-- 表单 -->
      <type-add @getTypeList="getTypeList" @closeAddDrawer="closeAddDrawer"></type-add>
    </el-drawer>
    <!-- 修改弹窗 -->
    <el-dialog title="修改" :visible.sync="updateDialog">
      <type-update :type="type" @getTypeList="getTypeList" @closeUpdateDialog="closeUpdateDialog" />
    </el-dialog>
  </div>
</template>

<script>
import typeApi from "@/api/type";
import TypeAdd from "./type-add";
import TypeUpdate from "./type-update";
export default {
  components: {
    TypeAdd,
    TypeUpdate
  },
  data() {
    return {
      type: {}, // 分类
      updateDialog: false, // 控制修改弹窗展示
      drawer: false, // 控制添加抽屉展示
      typeList: [] // 类型数组
    };
  },
  created() {
    this.getTypeList();
  },
  methods: {
    //获取类型列表
    getTypeList() {
      typeApi.listBack().then(res => {
        this.typeList = res.data;
      });
    },
    //根据id 删除
    handleDelete(typeId) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          typeApi.deleteById(typeId).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getTypeList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleEdit(id) {
      // 修改
      typeApi.get(id).then(res => {
        this.type = res.data;
        this.updateDialog = true;
      });
    },
    //启用
    enable(id, enable) {
      this.type.typeId = id;
      if (enable === 1) {
        this.type.enable = 0;
      }
      if (enable === 0) {
        this.type.enable = 1;
      }

      typeApi.update(this.type).then(res => {
        this.$message({
          type: "success",
          message: res.msg
        });
        this.getTypeList();
      });
    },
    //弃用
    disable(id) {
      this.type.typeId = id;
      this.type.enable = 0;
      typeApi.update(this.type).then(res => {
        this.$message({
          type: "success",
          message: res.msg
        });
        this.getTypeList();
      });
    },
    //打开抽屉
    openAddDrawer() {
      this.drawer = true;
    },
    //关闭抽屉
    closeAddDrawer() {
      this.drawer = false;
    },
    //关闭弹窗
    closeUpdateDialog() {
      this.updateDialog = false;
    }
  }
};
</script>

<style>
.el-table td,
.el-table th {
  text-align: center;
}
.add-button {
  margin: 15px;
}
.first-div {
  width: 95%;
  height: 100%;
  margin: 15px auto;
}
</style>